<template>
  <div>
    <template>
      <Card style="width:850px;margin: auto;">
        <Form :model="formLeft" label-position="left" :label-width="100" style="width: 850px;">

          <FormItem label="产品代码" style="margin-left: 25%;width: 300px">
            <Select v-model="formLeft.productName">
              <Option v-for="item in productList" :value="item.name">{{ item.name }}</Option>
            </Select>
          </FormItem>
          <div style="width: 840px;">
            <div style="width: 400px;float: left;">
              <Button type="dashed" long @click="handleAdd" icon="md-add" style="width: 100%;margin-bottom: 20px">添加原材料
              </Button>
              <Row>

                <Form ref="formDynamic" :model="formDynamic" style="float: left;width: 320px">
                  <FormItem
                    v-for="(item, index) in formDynamic.items"
                    v-if="item.status"
                    :key="index"
                    :prop="'items.' + index + '.value'">
                    <Row>

                      <FormItem label="原材料编码名称">
                        <Select v-model="item.materielNo" style="width: 210px" filterable>
                          <Option v-for="item in RawMaterialList" :value="item.name">{{ item.name }}</Option>
                        </Select>
                      </FormItem>
                      <div style="margin-top: 10px">
                        <span class="key" style="margin-left: 30px">重量:</span>
                        <Input v-model="item.weight" style="width: 80px"
                               @on-keyup="inputChange"
                               @on-keydown="inputChange"  @on-blur="inputChange"></Input>

                        <span class="key" style="margin-left: 50px">数量:</span>
                        <Input v-model="item.quantity" style="width: 80px"
                               @on-keyup="inputHandler" @on-keydown="inputHandler"  @on-blur="inputHandler"></Input>

                      </div>

                      <Button @click="handleRemove(index)" type="error" style="margin-left: 340px;margin-top: -60px">
                        删除
                      </Button>
                    </Row>
                  </FormItem>
                </Form>
              </Row>
            </div>
            <div style="width: 400px;margin-left: 430px">
              <Button type="dashed" long @click="handleAdd1" icon="md-add" style="width: 100%;margin-bottom: 20px">添加半成品
              </Button>
              <Row>

                <Form ref="formDynamic1" :model="formDynamic1">
                  <FormItem
                    v-for="(item, index1) in formDynamic1.items"
                    v-if="item.status"
                    :key="index1"
                    :prop="'items.' + index1 + '.value'"
                    style="height: 110px;width: 450px">
                    <Row>
                      <div style="width: 300px;float: left">

                        <span class="key" style="margin-left: 0px">半成品编码名称:</span>
                        <Select v-model="item.materielNo" style="width: 210px" filterable>
                          <Option v-for="item in SemiProductsList" :value="item.name">{{ item.name }}</Option>
                        </Select>
                        <div style="margin-top: 10px">
                          <span class="key" style="margin-left: 30px">重量:</span>
                          <Input v-model="item.weight" style="width: 80px" @on-keyup="inputChange"
                                 @on-keydown="inputChange"  @on-blur="inputChange"></Input>

                          <span class="key" style="margin-left: 50px">数量:</span>
                          <Input v-model="item.quantity" style="width: 80px"
                                 @on-keyup="inputHandler" @on-keydown="inputHandler"  @on-blur="inputHandler"></Input>

                        </div>
                      </div>
                      <div>
                        <Button @click="handleRemove1(index1)" type="error" style="margin-left: 30px;margin-top: 43px">
                          删除
                        </Button>
                      </div>

                    </Row>
                  </FormItem>

                </Form>

              </Row>
            </div>
          </div>

          <row type="flex" justify="center">
            <i-col span="20">

            </i-col>
            <i-col span="30">
              <Button type="primary" @click="BomInsert">添加</Button>
              <Button type="success" style="margin-left: 160px" @click="back">返回</Button>
            </i-col>
          </row>

        </Form>
      </Card>
    </template>
  </div>
</template>

<script>
  import {BomInsert, RawMaterialFindAll, ProductFindAll, SemiProductsFindAll} from "../../../api/data"

  export default {
    data() {
      return {
        index: 1,
        index1: 1,
        formDynamic: {
          items: [
            {
              index: 0,
              status: 1,
              materielNo: '',
              quantity: 0,
              weight: 0,
              processType: '0',
              productName: ''
            }
          ],
        },
        formDynamic1: {
          items: [
            {
              index1: 0,
              status: 1,
              materielNo: '',
              quantity: '',
              weight: '',
              processType: '1',
              productName: ''
            }
          ],
        },
        page: 1,//page 第几页
        pageSize: 1000,//pageSize:每页几条数据
        total: 0,
        RawMaterialList: [],
        SemiProductsList: [],
        productList: [],
        productName: '',
        formLeft: {
          productName: '',
          rawMaterialName: '',
          quantity: 0,
          weight: 0,
          processType: '',
        },
      }
    },
    mounted() {
      this.RawMaterialFindAll();
      this.SemiProductsFindAll();
      this.ProductFindAll();
    },
    methods: {
      inputChange(e) {
        //z只能输入一次小数点
        e.target.value = e.target.value.replace(".","$#$").replace(/\./g, "").replace("$#$", ".");
        //只能输入数字
        e.target.value = e.target.value.replace(/[^\d.]/g, "");
      },
      inputHandler(e) {
        //只能输入0-9
        e.target.value = e.target.value.replace(/[^0-9]/g, '')
      },
      BomInsert() {
        //添加原材料
        for (let i = 0; i < this.formDynamic.items.length; i++) {
          this.formDynamic.items[i].productName = this.formLeft.productName;
          this.formDynamic.items[i].processType = 1;
          if (this.formDynamic.items[i].materielNo !==null && this.formDynamic.items[i].materielNo !==""
          && this.formDynamic.items[i].productName !==null && this.formDynamic.items[i].productName !==""){

         //   console.log( this.formDynamic.items[i]);
            BomInsert( this.formDynamic.items[i]).then(res => {
              if (res.data.code == 0) {
                this.$Message.success("添加成功");
              } else {
                this.$Message.error(res.data.msg);
              }
            })
          } else {
            this.$Message.error("原材料编码名称为空！！！");
          }
        }

        //添加半成品
        for (let i = 0; i < this.formDynamic1.items.length; i++) {
          this.formDynamic1.items[i].productName = this.formLeft.productName;
          this.formDynamic1.items[i].processType = 0;
          if (this.formDynamic1.items[i].materielNo !==null && this.formDynamic1.items[i].materielNo !==""
            && this.formDynamic1.items[i].productName !==null && this.formDynamic1.items[i].productName !==""){
            BomInsert(this.formDynamic1.items[i]).then(res => {
              if (res.data.code == 0) {
                this.$Message.success("添加成功");
                this.$router.go(-1)
              } else {
                this.$Message.error(res.data.msg);
              }
            })
          } else {
            this.$Message.error("半成品编码名称为空！！！");
          }
        }
        //this.$router.go(-1)
      },
      RawMaterialFindAll() {
        var data = {
          page: this.page,
          pageSize: this.pageSize,
        };
        RawMaterialFindAll(data).then(data => {
          if (data.data.code == 0) {
            this.RawMaterialList = data.data.data.list;
          }
        })
      },
      SemiProductsFindAll() {
        var data = {
          page: this.page,
          pageSize: this.pageSize,
        };
        SemiProductsFindAll(data).then(data => {
          if (data.data.code == 0) {
            this.SemiProductsList = data.data.data.list;
          }
        })
      },
      ProductFindAll() {
        var data = {
          page: this.page,
          pageSize: this.pageSize,
        };
        ProductFindAll(data).then(data => {
          if (data.data.code == 0) {
            this.productList = data.data.data.list;
          }
        })
      },
      back() {
        this.$router.go(-1);
      },
      handleAdd() {
        this.index++;
        this.formDynamic.items.push({
          index: this.index,
          status: 1,
        });
      },
      handleRemove(index) {
        this.formDynamic.items.splice(index, 1);
        --this.index;
      },
      handleAdd1() {
        this.index1++;
        this.formDynamic1.items.push({
          index1: this.index1,
          status: 1,
        });
      },
      handleRemove1(index) {
        this.formDynamic1.items.splice(index, 1);
        --this.index1;
      },
    }
  }
</script>


